@extends('layouts._app')
@section('content')
    <body>
    <div class="wrap-container">
        @include('layouts._flash')
        <div id="LAY-popup-user-add" class="layui-layer-content">
            <div class="layui-form" lay-filter="layuiadmin-form-role" style="padding: 20px 30px 0 0;">
                {!! Form::open(['route' =>[ 'system.role.update',$role->id],'class'=>'layui-form','method'=>'put']) !!}
                {!! Form::hidden('filter','true') !!}
                <div class="layui-form-item">
                    {!! Form::label('','* 名称：',['class'=>'layui-form-label','style'=>'color:red']) !!}
                    <div class="layui-input-block">
                        {!! Form::text('name',"{$role->name}",['required','lay-verify'=>'required','class'=>'layui-input','placeholder'=>'请输入名称']) !!}
                    </div>
                </div>
                <div class="layui-form-item">
                    {!! Form::label('','权限范围：',['class'=>'layui-form-label']) !!}

                    <div class="layui-collapse" lay-accordion="" style="margin-left: 110px;">
                        <h2 style="position: relative;height: 38px;background-color: #f2f2f2;">
                            <input type="checkbox" lay-filter="allChoose" class="permission1"
                                   title="全选">
                        </h2>
                        @foreach($permissions as $permission)
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">{{$permission->name}}</h2>
                                <div class="layui-colla-content layui-show">
                                    <div class="layui-collapse" lay-accordion="" style="margin-bottom: 20px;">
                                        @foreach($permission->children as $children)
                                            <div class="layui-colla-item">
                                                <h2 style="position: relative;height: 38px;background-color: #f2f2f2;">
                                                    <input type="checkbox" class="permission2 permission"
                                                           value="{{$children->id}}"
                                                           @if($role_permissions->contains($children->id)) checked=""
                                                           @endif
                                                           name="permission_id[]" lay-filter="owner_one"
                                                           title="{{$children->name}}">
                                                </h2>
                                                <h2 class="layui-colla-title">{{$children->name}}</h2>
                                                <div class="layui-colla-content layui-show">
                                                    <input type="checkbox"
                                                           id="{{$children->id}}" data-id="{{$children->id}}"
                                                           class="permission3 permission"
                                                           @if($role_permissions->contains($children->id)) checked=""
                                                           @endif
                                                           lay-filter="owner_find"
                                                           title="{{$children->name}}展示">
                                                    @foreach($children->children as $c)
                                                        <input type="checkbox" name="permission_id[]"
                                                               id="{{$children->id}}"
                                                               @if($role_permissions->contains($c->id)) checked=""
                                                               @endif
                                                               value="{{$c->id}}" data-id="{{$children->id}}"
                                                               class="permission3 permission"
                                                               lay-filter="owner_find"
                                                               title="{{$c->name}}">
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    {!! Form::submit('确认',['class'=>'layui-btn','lay-filter'=>'formDemo','lay-submit']) !!}
                </div>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
    <script src="{{asset('static/admin/layui/layui.js')}}" type="text/javascript" charset="utf-8"></script>
    <script src="{{asset('js/jquery.min.js')}}" type="text/javascript" charset="utf-8"></script>
    <script>
        //Demo
        layui.use(['form', 'jquery', 'element', 'layer'], function () {
            var form = layui.form();
            var element = layui.element();
            var layer = layui.layer;
            $ = layui.jquery;
            form.render();
            var item = $(".permission");
            var j = 0;
            for (var i = 0; i < item.length; i++) {
                if (item[i].checked == false) {
                    $(".permission1").prop("checked", false);
                } else {
                    j++;
                }
            }
            if (j == item.length) {
                $(".permission1").prop("checked", true);
            }
            form.render('checkbox');

            //监听提交
            form.on('submit(formDemo)', function (data) {
            });
            //全选
            form.on('checkbox(allChoose)', function (data) {
                var a = data.elem.checked;
                if (a == true) {
                    $(".permission2").prop("checked", true);
                    $(".permission3").prop("checked", true);
                } else {
                    $(".permission2").prop("checked", false);
                    $(".permission3").prop("checked", false);
                }
                form.render('checkbox');
            });

            //有一个未选中全选取消选中
            form.on('checkbox(owner_one)', function (data) {
                if (data.elem.checked) {
                    $(".permission3[data-id='" + data.elem.value + "']").prop('checked', true);
                } else {
                    $(".permission3[data-id='" + data.elem.value + "']").prop('checked', false);
                }

                var item = $(".permission");
                var j = 0;
                for (var i = 0; i < item.length; i++) {
                    if (item[i].checked == false) {
                        $(".permission1").prop("checked", false);
                    } else {
                        j++;
                    }
                }
                if (j == item.length) {
                    $(".permission1").prop("checked", true);
                }
                form.render('checkbox');
            })
            //有一个未选中全选取消选中
            form.on('checkbox(owner_find)', function (data) {
                var permission = $(".permission3[id='" + data.elem.id + "']");
                var k = 0;
                for (var q = 0; q < permission.length; q++) {
                    if (permission[q].checked == true) {
                        $("#" + data.elem.id).prop("checked", true);
                        $(".permission2[value='" + data.elem.id + "']").prop("checked", true);
                    } else {
                        k++;
                    }
                }
                if (k == permission.length) {
                    $(".permission2[value='" + data.elem.id + "']").prop("checked", false);
                }

                var item = $(".permission");
                var j = 0;
                for (var i = 0; i < item.length; i++) {
                    if (item[i].checked == false) {
                        $(".permission1").prop("checked", false);
                    } else {
                        j++;
                    }
                }
                if (j == item.length) {
                    $(".permission1").prop("checked", true);
                }
                form.render('checkbox');
            })
        })
    </script>
    </body>
@endsection
